<template>
  <div>
    <el-form :model="msg.data" :rules="rules" ref="form" label-position="left" label-width="30%" class="ml30">
      <el-row>
        <el-col :span="12">
          <el-form-item label="学校名称：" prop="school">
            <el-input class="width80" v-model="msg.data.school" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缺失数据条数：" prop="missingTestNum">
            <el-input class="width80" v-model="msg.data.missingTestNum" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学籍号：" prop="schoolRollId">
            <el-input class="width80" v-model="msg.data.schoolRollId" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名：" prop="name">
            <el-input class="width80" v-model="msg.data.name" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="入学年级：" prop="gradeYear">
            <el-select class="width80" v-model="msg.data.gradeYear" placeholder="请选择入学年级">
              <el-option v-for="item in gradeYear" :key="item.key" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年级：" prop="grade">
            <el-select v-if="msg.data.grade.toString().charAt(0) === '1'" class="width80" v-model="msg.data.grade" placeholder="请选择入学年级">
              <el-option label="一年级" :value="11"/>
              <el-option label="二年级" :value="12"/>
              <el-option label="三年级" :value="13"/>
              <el-option label="四年级" :value="14"/>
              <el-option label="五年级" :value="15"/>
              <el-option label="六年级" :value="16"/>
            </el-select>
            <el-select v-if="msg.data.grade.toString().charAt(0) === '2'" class="width80" v-model="msg.data.grade" placeholder="请选择入学年级">
              <el-option label="初一" :value="21"/>
              <el-option label="初二" :value="22"/>
              <el-option label="初三" :value="23"/>
            </el-select>
            <el-select v-if="msg.data.grade.toString().charAt(0) === '3'" class="width80" v-model="msg.data.grade" placeholder="请选择入学年级">
              <el-option label="高一" :value="31"/>
              <el-option label="高二" :value="32"/>
              <el-option label="高三" :value="33"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="班级：" prop="class">
            <el-select class="width80" v-model="msg.data.class" placeholder="请选择班级">
              <el-option v-for="item in classes" :key="item.key" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="测试日期：" prop="measureDate">
            <el-date-picker class="width80" v-model="msg.data.measureDate" type="date" placeholder="选择测试日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否免测：" prop="isExemption">
            <el-select class="width80" v-model="msg.data.isExemption" placeholder="请选择是否免测">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="综合成绩：" prop="physicalTotalScore">
            <el-input class="width80" v-model="msg.data.physicalTotalScore" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="身高：" prop="height">
            <el-input class="width80" v-model="msg.data.height"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体重：" prop="weight">
            <el-input class="width80" v-model="msg.data.weight"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="体重指数：" prop="bodyMassIndex">
            <el-input class="width80" v-model="msg.data.bodyMassIndex" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="肺活量（ml）：" prop="vitalCapacity">
            <el-input class="width80" v-model="msg.data.vitalCapacity" :disabled="!msg.data.isVitalCapacity"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="50米跑（s）：" prop="fiftyMeters">
            <el-input class="width80" v-model="msg.data.fiftyMeters" :disabled="!msg.data.isFiftyMeters"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="坐位体前屈（cm）：" prop="sitAndReach">
            <el-input class="width80" v-model="msg.data.sitAndReach" :disabled="!msg.data.isSitAndReach"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="一分钟跳神（次）：" prop="oneMinuteRopeSkipping">
            <el-input class="width80" v-model="msg.data.oneMinuteRopeSkipping" :disabled="!msg.data.isOneMinuteRopeSkipping"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="一分钟仰卧起坐（个）：" prop="oneMinuteSitUps">
            <el-input class="width80" v-model="msg.data.oneMinuteSitUps" :disabled="!msg.data.isOneMinuteSitUps"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="50米×8往返跑（s）：" prop="shuttleRun">
            <el-input class="width80" v-model="msg.data.shuttleRun" :disabled="!msg.data.isShuttleRun"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="立定跳远（cm）：" prop="standingLongJump">
            <el-input class="width80" v-model="msg.data.standingLongJump" :disabled="!msg.data.isStandingLongJump"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="引体向上（次/分）：" prop="chinning">
            <el-input class="width80" v-model="msg.data.chinning" :disabled="!msg.data.isChinning"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="1000米（s）：" prop="oneThousandMeters">
            <el-input class="width80" v-model="msg.data.oneThousandMeters" :disabled="!msg.data.isOneThousandMeters"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="800米（s）：" prop="eightHundredMeters">
            <el-input class="width80" v-model="msg.data.eightHundredMeters" :disabled="!msg.data.isEightHundredMeters"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体脂：" prop="bodyFat">
            <el-input class="width80" v-model="msg.data.bodyFat" :disabled="!msg.data.isBodyFat"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="握力：" prop="grip">
            <el-input class="width80" v-model="msg.data.grip" :disabled="!msg.data.isGrip"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="反应能力：" prop="responseCapability">
            <el-input class="width80" v-model="msg.data.responseCapability" :disabled="!msg.data.isResponseCapability"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="平衡能力：" prop="balanceAbility">
            <el-input class="width80" v-model="msg.data.balanceAbility" :disabled="!msg.data.isBalanceAbility"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纵跳：" prop="verticalJump">
            <el-input class="width80" v-model="msg.data.verticalJump" :disabled="!msg.data.isVerticalJump"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer">
      <el-button class="el-button--blue" type="primary" @click="submitPhysicalChange">保 存</el-button>
      <el-button @click="msg.visible=false">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { SubmitPhysicalChange } from '../../../api/form'
export default {
  name: 'physical-change',
  model: {
    prop: 'msg',
    event: 'cc'
  },
  props: {
    msg: {}
  },
  data () {
    let validateHeight = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 50 || Number(value) > 300) {
          callback(new Error('身高范围为50到300'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateWeight = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 10 || Number(value) > 1000) {
          callback(new Error('体重范围为10到1000'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        }
      }
      callback()
    }
    let validateVitalCapacity = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 20000) {
          callback(new Error('肺活量范围为10到20000'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateFiftyMeters = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 5 || Number(value) > 100) {
          callback(new Error('50米跑范围为5到100'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        }
      }
      callback()
    }
    let validateSitAndReach = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < -100 || Number(value) > 100) {
          callback(new Error('坐位体前屈范围为-100到100'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        }
      }
      callback()
    }
    let validateOneMinuteRopeSkipping = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 300) {
          callback(new Error('一分钟跳绳范围为0到300'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateOneMinuteSitUps = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 100) {
          callback(new Error('一分钟仰卧起坐范围为0到100'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateShuttleRun = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 100) {
          callback(new Error('50米×8往返跑范围为40到600'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateStandingLongJump = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 400) {
          callback(new Error('立定跳远范围为0到400'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateChinning = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 100) {
          callback(new Error('引体向上范围为0到100'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateOneThousandMeters = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 120 || Number(value) > 1800) {
          callback(new Error('1000米范围为120到1800'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateEightHundredMeters = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 120 || Number(value) > 1800) {
          callback(new Error('800米范围为120到1800'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateBodyFat = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 100) {
          callback(new Error('体脂范围为0到100'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        }
      }
      callback()
    }
    let validateGrip = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 100) {
          callback(new Error('握力范围为0到100'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        }
      }
      callback()
    }
    let validateResponseCapability = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 10) {
          callback(new Error('反应能力范围为0到10'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        }
      }
      callback()
    }
    let validateBalanceAbility = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 100) {
          callback(new Error('反应能力范围为0到100'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        } else if (value.toString().indexOf('.') !== -1) {
          callback(new Error('不能是小数'))
        }
      }
      callback()
    }
    let validateVerticalJump = (rule, value, callback) => {
      if (value.toString() !== '') {
        if (Number(value) < 0 || Number(value) > 100) {
          callback(new Error('反应能力范围为0到100'))
        } else if (!/^-?(([1-9][0-9]*(\.[0-9]*[1-9]+)?)|(0?(\.[0-9]*[1-9]+)?))$/.test(value.toString())) {
          callback(new Error('输入必须是数字'))
        }
      }
      callback()
    }
    return {
      rules: {
        measureDate: [
          { required: true, message: '测试日期不能为空', trigger: 'change' }
        ],
        height: [
          { validator: validateHeight, trigger: 'change' }
        ],
        weight: [
          { validator: validateWeight, trigger: 'change' }
        ],
        vitalCapacity: [
          { validator: validateVitalCapacity, trigger: 'change' }
        ],
        fiftyMeters: [
          { validator: validateFiftyMeters, trigger: 'change' }
        ],
        sitAndReach: [
          { validator: validateSitAndReach, trigger: 'change' }
        ],
        oneMinuteRopeSkipping: [
          { validator: validateOneMinuteRopeSkipping, trigger: 'change' }
        ],
        oneMinuteSitUps: [
          { validator: validateOneMinuteSitUps, trigger: 'change' }
        ],
        shuttleRun: [
          { validator: validateShuttleRun, trigger: 'change' }
        ],
        standingLongJump: [
          { validator: validateStandingLongJump, trigger: 'change' }
        ],
        chinning: [
          { validator: validateChinning, trigger: 'change' }
        ],
        oneThousandMeters: [
          { validator: validateOneThousandMeters, trigger: 'change' }
        ],
        eightHundredMeters: [
          { validator: validateEightHundredMeters, trigger: 'change' }
        ],
        bodyFat: [
          { validator: validateBodyFat, trigger: 'change' }
        ],
        grip: [
          { validator: validateGrip, trigger: 'change' }
        ],
        responseCapability: [
          { validator: validateResponseCapability, trigger: 'change' }
        ],
        balanceAbility: [
          { validator: validateBalanceAbility, trigger: 'change' }
        ],
        verticalJump: [
          { validator: validateVerticalJump, trigger: 'change' }
        ]
      },
      gradeYear: [],
      classes: []
    }
  },
  mounted () {
    for (let i = 2000; i <= new Date().getFullYear(); i++) {
      this.gradeYear.push({ key: i, value: i + '级' })
    }
    for (let i = 1; i < 100; i++) {
      this.classes.push({ key: i, value: i + '班' })
    }
  },
  methods: {
    submitPhysicalChange () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          SubmitPhysicalChange(this.msg.data).then((res) => {
            this.msg.visible = false
            this.$store.dispatch('SetFlash')
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .width80 {
    width: 80%;
  }
  .footer {
    display: flex;
    justify-content: flex-end;
  }
</style>
